/**
 * by kaijie
 */
var height = document.body.clientHeight*0.8;
var width = document.body.clientWidth*0.93;
var area1 = document.getElementById('area-1');
var area2 = document.getElementById('area-2');
var area3 = document.getElementById('area-3')
area1.style.height = height + "px";
area1.style.width = width + "px";
area2.style.height = height + "px";
area2.style.width = width + "px";
area3.style.height = height + "px";
area3.style.width = width + "px";
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(area1);
var myChart2 = echarts.init(area2);
var myChart3 = echarts.init(area3);
// 指定图表的配置项和数据
var colors = ['#5793f3', '#d14a61'];
//柱状图配置信息
var option1 = {
    color: colors,

    tooltip: {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        right: '20%'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['订单数','金额']
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '订单数',
            position: 'left',
            minInterval: 1,
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} 个'
            }
        },
        {
            type: 'value',
            name: '金额',
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value}元 '
            }
        }
    ],
    series: [
        {
            name:'订单数',
            type:'bar',
            yAxisIndex: 0
        },
        {
            name:'金额',
            type:'bar',
            	yAxisIndex: 1
        }
    ]
};
//饼状图配置信息
var option2 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            saveAsImage: {show: true}
        }
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['订单数','金额']
    },
    series: [
        {
            name:'订单数',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[]
        },
        {
            name:'金额',
            type:'pie',
            radius: ['40%', '55%'],

            data:[]
        }
    ]
};
//折线图配置信息
var option3 = {
    color: colors,

    tooltip: {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        right: '20%'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['订单数','金额']
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '订单数',
            position: 'left',
            minInterval: 1,
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} 个'
            }
        },
        {
            type: 'value',
            name: '金额',
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value}元 '
            }
        }
    ],
    series: [
        {
            name:'订单数',
            type:'line',
            yAxisIndex: 0,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'金额',
            type:'line',
            yAxisIndex: 1,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);